<template>
  <div class="shoplist">
    <div class="shop"  v-for="(item,index) in lists" :key="index">
      <div class="img-box">
        <img :src="item.picUrl" alt="item.picUrl" />
      </div>
      <div class="text" @click="godetail(index)">
        <div class="name">{{item.name}}</div>
        <div class="point">
          <span class="level">★4.3</span>
          <span class="sale">{{item.monthSalesTip}}</span>
        </div>
        <div class="minPrice">
          <span>{{item.minPriceTip}}</span>
          <span>{{item.shippingFeeTip}}</span>
          <span>{{item.deliveryTimeTip}} {{item.distance}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {fun_list} from '@/api/index.js'
export default {
  data(){
    return{
      lists:[]
    }
  },
    methods:{
        godetail(i){
            this.$router.push({
              name:'shop',
              query:{
                  id:this.lists[i].mtWmPoiId,
                  name:this.lists[i].name
              }
            })
          //  console.log(this.lists[i].mtWmPoiId,this.lists[i].name);
        }
    },
    created(){
          fun_list().then((res)=>{
            this.lists=res.data.list
          })
    }
 
  
};
</script>

<style scoped lang="scss">
.shop{
    display: flex;
    align-items: center;
    padding: .5556rem 1.1111rem;
}
.text{
    font-size: .8333rem;
    margin-left: .4444rem;
}
.img-box{
    width: 5.5556rem;
    img{
        width: 100%;
    }
}
.point{
    font-size: .6667rem;
        color:#ccc;
}
.name{
    font-size: 1rem;
    font-weight: bold; 
    padding-bottom: 1.1111rem;
}
.minPrice{
    margin-top: .5556rem;
}
.minPrice>span{
        font-size: .6667rem;
        color:#ccc;
        margin-right: .8333rem;
}
.level{
    color:orange;
    margin-right: .4444rem;
}
</style>